import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { SongsCtrlWrapper } from './style';
interface IProps {
  children?: ReactNode;
  play: () => {};
  className?: string;
}

const SongsCtrl: FC<IProps> = (props) => {
  const { className, play } = props;
  function handlePlayClick() {}

  return (
    <SongsCtrlWrapper className={className}>
      <div className="controls">
        <div className="sprite_button play" onClick={play}>
          <i className="sprite_button inner">
            <em className="sprite_button play-icon"></em>
            播放
          </i>
        </div>
        <div className="sprite_button favorite">
          <i className="sprite_button inner">收藏</i>
        </div>
        <div className="sprite_button share">
          <i className="sprite_button inner">分享</i>
        </div>
        <div className="sprite_button download">
          <i className="sprite_button inner">下载</i>
        </div>
        <div className="sprite_button comment">
          <i className="sprite_button inner">评论</i>
        </div>
      </div>
    </SongsCtrlWrapper>
  );
};

export default memo(SongsCtrl);
